<template>
  <div aria-label="A complete example of page header">
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center" style="display: flex">
          <img
            src="https://img1.baidu.com/it/u=3176339688,1345756960&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"
            style="width: 5.3333vw; height: 5.3333vw; border-radius: 50%"
            alt=""
          />
          <!-- <div style="margin-top: 1.3333vw; margin-left: 0.5333vw">
            <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
              爱耍帅的小伙
            </span>
            <el-tag>这是一个很帅气的名称</el-tag>
          </div> -->
        </div>
      </template>
      <template #extra>
        <div
          class="flex items-center"
          style="display: flex; gap: 2.6667vw; position: relative; right: 10px"
        >
          <el-badge :value="9999999" class="item">
            <el-button>私信</el-button>
          </el-badge>
          <el-badge class="item">
            <el-button>设置</el-button>
          </el-badge>
        </div>
      </template>

      <el-descriptions :column="3" size="small" class="mt-4">
        <el-descriptions-item label="昵称">爱耍帅的小伙</el-descriptions-item>
        <el-descriptions-item label="联系方式"> 13145200000 </el-descriptions-item>
        <el-descriptions-item label="住址">心里</el-descriptions-item>
        <el-descriptions-item label="职业">
          <el-tag size="small">演员</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="人生格言 "> 尽情做自己 </el-descriptions-item>
      </el-descriptions>
    </el-page-header>
  </div>
</template>

<script setup lang="ts">
import { ElNotification as notify } from 'element-plus'

const onBack = () => {
  notify('尽情做自己  !')
}
</script>
